<template>
  <div class="svgAnimation">
    <el-row>
      <el-col :span="6">
        <div>锥形渐变，svg渐变描边和填充动画效果</div>
        <svg class="svg_class" t="1716436383017" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="1139" width="200" height="200">
          <path
            d="M892.63 386.26c0-111.18-90.13-201.3-201.3-201.3-72.9 0-136.75 38.75-172.07 96.78-30.94-27.57-71.72-44.33-116.42-44.33-65.75 0-123.03 36.25-152.96 89.86-66.45 6.01-118.52 61.86-118.52 129.88 0 72.03 58.39 130.42 130.42 130.42h456.48c37.56 0 71.4-15.88 95.2-41.29 48.12-36.79 79.17-94.78 79.17-160.02z"
            fill="#EFF3F8" p-id="1140" data-spm-anchor-id="a313x.collections_detail.0.i1.5eb63a81Myab8z"
            class="selected on1">
          </path>
          <path
            d="M307.38 676.69L260.1 813.77c-6.75 19.58-28.1 29.98-47.68 23.22-19.58-6.75-29.98-28.1-23.22-47.68l47.28-137.08c6.75-19.58 28.1-29.98 47.68-23.22 19.58 6.75 29.97 28.1 23.22 47.68zM472.62 676.69l-47.28 137.08c-6.75 19.58-28.1 29.98-47.68 23.22-19.58-6.75-29.98-28.1-23.22-47.68l47.28-137.08c6.75-19.58 28.1-29.98 47.68-23.22 19.57 6.75 29.97 28.1 23.22 47.68zM637.85 676.69l-47.28 137.08c-6.75 19.58-28.1 29.98-47.68 23.22-19.58-6.75-29.98-28.1-23.22-47.68l47.28-137.08c6.75-19.58 28.1-29.98 47.68-23.22 19.58 6.75 29.98 28.1 23.22 47.68zM803.09 676.69l-47.28 137.08c-6.75 19.58-28.1 29.98-47.68 23.22-19.58-6.75-29.98-28.1-23.22-47.68l47.28-137.08c6.75-19.58 28.1-29.98 47.68-23.22 19.57 6.75 29.97 28.1 23.22 47.68z"
            fill="#7CA7EA" p-id="1141" data-spm-anchor-id="a313x.collections_detail.0.i0.5eb63a81Myab8z"
            class="selected on2">
          </path>
        </svg>
      </el-col>
      <el-col :span="6">
        <div>阳光光束一闪而过的效果</div>
        <div class="conic">
          <div class="conic_inner">
            <span></span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return{}
  },
  mounted(){},
  methods:{}
}
</script>

<style lang="scss" scoped>
  .svg_class{
    fill: none; //填充，fill是单一颜色
    background-image: conic-gradient(#488cfb,
        #29dbbc,
        #ddf505,
        #ff9f0e,
        #e440bb,
        #655adc,
        #488cfb);    
    stroke: conic-gradient(#488cfb,
        #29dbbc,
        #ddf505,
        #ff9f0e,
        #e440bb,
        #655adc,
        #488cfb); //描边
    stroke-width: 5;
    stroke-linecap: round;
    animation: stroke 2s ease-in 1s infinite;
    .on1{
      animation: fill-color1 7s linear 0s infinite;
    }
    .on2{
      animation: fill-color1 7s ease-in 0s infinite;
    }
  }
  @keyframes stroke {
    0% {
      stroke-dasharray: 0, 600px;
    }

    100% {
      stroke-dasharray: 600px, 0;
    }
  }
  @keyframes fill-color1 {
    0% {
      fill: #488cfb;
    }
  
    15% {
      fill: #29dbbc;
    }
  
    30% {
      fill: #ddf505;
    }
  
    45% {
      fill: #ff9f0e;
    }
  
    60% {
      fill: #e440bb;
    }
  
    80% {
      fill: #655adc;
    }
  
    100% {
      fill: #488cfb;
    }
  }
  .conic{
    width: 200px;
    height: 200px;
    position: relative;
    background-image: conic-gradient(
      #488cfb,
      #29dbbc,
      #ddf505,
      #ff9f0e,
      #e440bb,
      #655adc,
      #488cfb
    );
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    &::before{
      content: "";
      position: absolute;
      left: 75px;
      top: -40px;
      width: 40px;
      height: 300px;
      transform-origin: right center;
      transform: rotate(45deg);
      box-shadow: 0 0 16px 0 white;
      animation: conic_lightning linear 4s infinite;
    }
    .conic_inner{
      background: rgba($color: #000000, $alpha: 1.0);
      width: 150px;
      height: 150px;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      span{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #fff;
        display: inline-block;
        animation: roll 10s infinite;
        box-shadow: 0 0 20px #fff;
      }
    }
  }
  @keyframes conic_lightning {
    0%{
      background: linear-gradient(45deg,#fff,#fff);
      opacity: 0;
      left: 0px;
      top: -100px;
    }
    50%{
      background: linear-gradient(45deg, #fff, #fff);
      opacity: 0.5;
      left: 75px;
      top: -40px;
    }
    100%{
      background: linear-gradient(45deg, #fff, #fff);
      opacity: 0;
      left: 200px;
      top: 40px;
    }
  }
  @keyframes roll {
    0%{
      transform: rotate(0) translateX(-120px) translateY(20px);
    }
    25%{
      transform: rotate(90deg) ;
    }
    50%{
      transform: rotate(180deg) translateX(-120px) translateY(-20px);
    }
    75%{
      transform: rotate(270deg) ;
    }
    100%{
      transform: rotate(360deg) translateX(-120px) translateY(20px);
    }
  }
</style>